<template>
	<view class="mwrap p10 wh" v-if="form.id">
		<view class="crd cf f12 mb15" style="height: 352rpx;" :style="{background:subColor}">
			<view class="top">
				<view class="head mb20">
					<u-avatar class="mr15" :src="form.avatar" size="60" shape="circle"></u-avatar>
					<view class="c0">
						<view class="f-y-c mb5">
							<text class="iconfont icon-7 ml7 mr4"></text>
							<text>{{form.nickname}}</text>
						</view>
						<view class="f-y-c">
							<text class="iconfont icon-shouji ml7 mr4"></text>
							<text class="">{{form.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="f24 c0">{{form.vipCard}}</view>
			</view>
			<view class="bottom f-x-bt cf f12" style="background: #ffc107;">
				<text>注册时间</text>
				<text>{{form.created_at}}</text>
			</view>
		</view>
		<view class="option f15 c0">
			<view class="li dfa" v-for="(item,index) in optionList" :key="index">
				<text class="mr10 iconfont c6 f14" :class="item.icon"></text>
				<view class="f-x-bt f-1 p-15-0 f14" :class="{'bb1':index!==4}">
					<text>{{item.title}}</text>
					<view v-if="item.label == 'yhq'" class="dfa">
						<text class="c9 pr10" @click="toCoupon">{{form.coupons || 0}}张</text>
						<u--text type="warning" text="发券" size="14" @click="issue"></u--text>
					</view>
					<view v-else-if="item.label == 'ye'" class="dfa">
						<text class="c9">￥{{form.account.balance || 0}}</text>
						<view class="ml5" v-if="role.includes('tiaozhengyue')">
							<u-icon name="edit-pen" color="#999" size="18" @click="handEdit('balance')">></u-icon>
						</view>
						<!-- <text class="change c9" @click="change">修改</text> -->
					</view>
					<view v-else-if="item.label == 'jf'" class="dfa">
						<text class="c9" style="padding-right:10upx">{{form.account.integral || 0}}</text>
						<view class="ml5" v-if="role.includes('tiaozhengjifen')">
							<u-icon name="edit-pen" color="#999" size="18" @click="handEdit('integral')"></u-icon>
						</view>
					</view>
					<view v-else-if="item.label == 'czz'" class="dfa">
						<text class="c9" style="padding-right:10upx">{{ form.account.exp || 0 }}</text>
					</view>
					<view v-else-if="item.label == 'vip'" class="dfa">
						<text class="c9" style="padding-right:10upx" v-if="form.vip">{{form.vip.name}}<text
								class="ml5">(vip{{form.vip.level}})</text></text>
						<u--text type="warning" text="修改" size="14" @click="changeVip"></u--text>
					</view>
					<view v-else class="dfa">
						<text class="c9">{{item.value}}</text>
						<text class="ml5 c9" v-if="item.value">张</text>
					</view>
				</view>
			</view>
		</view>
		<view class="note f16 c0 mt10">
			<view class="li dfa" v-for="(item,index) in optionList2" :key="index">
				<text class="mr10 iconfont c6 f14" :class="item.icon"></text>
				<view class=" f-x-bt f-1 p-15-0 f14" :class=" {'bb1':index!==4}">
					<text>{{item.title}}</text>
					<view class="dfa" v-if="index === 0">
						<text class="c9 pr10" v-if="form.realname">{{form.realname}}</text>
						<u--text type="warning" text="修改资料" size="14" @click="changeInfo"></u--text>
					</view>
					<view class="dfa" v-else-if="index === 1">
						<text class="c9">{{form.sexFormat}}</text>
					</view>
					<view class="dfa" v-else-if="index === 3">
						<text class="c9">
							<block v-if="form.label && form.label.length">
								<text v-for="v in form.label" :key="v.label">{{ v.title }},</text>
							</block>
						</text>
					</view>
					<view class="dfa" v-else-if="index === 2">
						<text class="c9" v-if="form.birthday">{{form.birthday}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="type === 'pay'" class="p10 but">
			<u-button text="确认" size="large" :color="subColor" shape="circle" @click="submit"></u-button>
		</view>
		<editBalance ref="balanceRef" :form="form" @handeditBe="handeditBe" @handeditIl="handeditIl"></editBalance>
		<editVip ref="vipRef" @handeditVip="handeditVip"></editVip>
		<editInfo ref="infoRef" @handeditInfo="handeditInfo"></editInfo>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex';
	import editBalance from './components/editBalances.vue';
	import editVip from './components/editVip.vue';
	import editInfo from './components/editInfo.vue';
	export default {
		components: {
			editBalance,
			editVip,
			editInfo,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				phone: '18671131263',
				money: '0.0',
				integral: '0.0',
				optionList: [{
						title: '会员等级',
						icon: 'icon-huiyuandengji-copy',
						value: '',
						label: 'vip',
					},
					{
						title: '余额',
						icon: 'icon-yue',
						value: '￥0.0 修改',
						label: 'ye',
					},
					{
						title: '积分',
						icon: 'icon-jifen',
						value: '',
						label: 'jf',
					},
					{
						title: '优惠券',
						icon: 'icon-youhuiquan',
						value: '0',
						label: 'yhq',
					},
					{
						title: '成长值',
						icon: 'icon-chengchangzhi',
						value: '',
						label: 'czz',
					},
				],
				optionList2: [{
						title: '真实姓名',
						icon: 'icon-zhenshixingming',
						value: '123',
					},
					{
						title: '性别',
						icon: 'icon-xingbie_nan',
						value: '男',
					},
					{
						title: '生日',
						icon: 'icon-shengri',
						value: '',
					},
					{
						title: '标签',
						icon: 'icon-biaoqian',
						value: '0',
					}
				],
				type: '',
				id: '',
				form: {},
				couponList: [],
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id
				setTimeout(() => {
					this.fetchData(options.id)
				}, 1500)
			}
			this.phone = options.phone;
			this.type = options.type ? options.type : ''
			this.getReasonConfig()
		},
		onShow() {
			let that = this
			uni.$on('updateData', function(data) {
				setTimeout(() => {
					that.fetchData(data)
				}, 1500)
			})
		},
		computed: {
			...mapState({
				role: state => state.user.roleData || [],
			}),
		},
		methods: {
			...mapMutations(["setConfig"]),
			async getReasonConfig() {
				let {
					data
				} = await this.beg.request({
					url: this.api.config,
					data: {
						ident: 'reasonConfig'
					}
				})
				this.setConfig({
					name: 'reasonConfig',
					data,
				})
			},
			async fetchData(id) {
				let {
					data
				} = await this.beg.request({
					url: `${this.api.cMember}/${id}`
				})
				this.form = data
			},
			show(v, i) {
				if (v.value && v.value == 0) {
					const msg = i === 0 ? '用户无优惠券' : '用户无礼品卡'
					uni.$u.toast(msg);
				}
				if (!v.value) {
					uni.navigateTo({
						url: '/pages/home/memberManage/record'
					});
				}
			},
			change() {
				uni.navigateTo({
					url: '/pages/home/memberManage/changeStored'
				});
			},
			submit() {
				uni.navigateTo({
					url: '/pages/home/cash/index'
				});
			},
			handEdit(t) {
				if (t == 'balance') {
					this.$refs['balanceRef'].open('balance')
				} else if (t == 'integral') {
					this.$refs['balanceRef'].open('integral')
				}
			},
			async handeditIl(e) {
				let {
					data,
					msg,
				} = await this.beg.request({
					url: `${this.api.changeIntegral}/${this.form.id}`,
					method: 'POST',
					data: e
				})
				uni.$u.toast(msg)
				this.$refs['balanceRef'].close()
				this.fetchData(this.id)
			},
			async handeditBe(e) {
				let {
					data,
					msg,
				} = await this.beg.request({
					url: `${this.api.changeBalance}/${this.form.id}`,
					method: 'POST',
					data: e
				})
				uni.$u.toast(msg)
				this.$refs['balanceRef'].close()
				this.fetchData(this.id)
			},
			toCoupon() {
				uni.navigateTo({
					url: `/pages/home/memberManage/coupon?id=${this.form.id}`
				});
			},
			//发券
			issue() {
				uni.navigateTo({
					url: `/pages/home/memberManage/addCoupon?id=${this.form.id}`
				});
			},
			close() {
				this.show = false
				this.$refs['couponRef'].close()
			},
			//修改等级
			changeVip(item) {
				this.$refs['vipRef'].open(this.form && this.form.vip || {})
			},
			async handeditVip(val) {
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.changVip}/${this.form.id}`,
					method: 'POST',
					data: {
						vipId: val
					}
				})
				uni.$u.toast(msg)
				this.$refs['vipRef'].close()
				this.fetchData(this.id)
			},
			//修改资料
			changeInfo() {
				this.$refs['infoRef'].open({
					realname: this.form.realname,
					sex: this.form.sex,
					mobile: this.form.mobile,
					birthday: this.form.birthday
				})
			},
			async handeditInfo(val) {
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.cMember}/${this.form.id}`,
					method: 'PUT',
					data: {
						...val
					}
				})
				uni.$u.toast(msg)
				this.$refs['infoRef'].close()
				this.fetchData(this.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mwrap {
		padding: 24rpx 20rpx 200rpx;
		background-color: #f6f6f6;
		overflow: auto;

		.crd {
			position: relative;
			border-radius: 20upx;
			height: 336rpx;
			overflow: hidden;

			.top {
				padding: 40upx 26upx 0px;

				.head {
					display: flex;
					align-items: flex-end;

					image {
						width: 0.8rem;
						height: 0.8rem;
					}
				}
			}

			.bottom {
				padding: 16upx 26upx;
				width: 100%;
				position: absolute;
				bottom: 0;
			}
		}

		.option,
		.note {
			padding: 0 20upx;
			border-radius: 20upx;
			background: #fff;

			.li {
				display: flex;
				width: 100%;

				.iconfont {
					font-size: 38rpx;
				}

				.change {
					padding: 0 10upx;
					text-decoration: underline;
				}
			}
		}

		.but {
			position: fixed;
			bottom: 50rpx;
			left: 0;
			width: 100%;
		}
	}
</style>